<template>
    <div class="retrieval" @touchmove.passive="handleTouchMove">
        <div class="retrieval-search-content" ref="scrollDiv"
            :style="{ marginBottom: isSafari ? '85px' : keyboardStatus ? '120px' : isEdge ? '160px' : isEdgeBrowser().isEdge ? '0px' : '163px', width: '100%', }">
            <div class="retrieval-content" v-if="!arrList.length">
                <img :src="AvatarCspBk" alt="" style="width: 35px" />
                <div class="retrieval-assistant">Hi! 我是CSP搜索助理。</div>
                <div class="retrieval-search">请在下方输入您要搜索或咨询的内容{{ isEdge }}{{ keyboardStatus }}</div>
            </div>
            <Retrieval ref="viewRef" @search="search" />
        </div>
    </div>

    <div class="retrieval-footer" :style="{ bottom: isSafari ? '100px' : isEdgeBrowser().isAndroid ? '13px' : '10px' }">
        <van-cell-group inset>
            <van-field v-model="message" rows="1" autosize type="textarea" maxlength="500" show-word-limit
                @keyup.enter="handKeyUp" @focus="handleFocus" @blur="handleBlur" ref="inputRef" />
        </van-cell-group>
    </div>
</template>

<script setup lang='ts'>
import { errorToast } from '@/utils/toast'
import useKeyboard from '@/utils/keyboard'
import Retrieval from '@/components/Retrieval.vue'
import AvatarCspBk from '@/assets/svg/avatar-csp-bk.svg'
import { WorkOrderType } from '@/api/worksheets/type'
import { isSafariBrowser, isEdgeBrowser } from '@/utils/browser'
import { keyboardDetection } from '@/utils/keyboardDetection'

const { hideKeyboard } = useKeyboard()

const { keyboardStatus, handleFocus, handleBlur } = keyboardDetection()

const isSafari = ref(false)

const isEdge = ref(false)

const message = ref('')

const scrollDiv = ref()

const arrList = ref<WorkOrderType[]>([])

const viewRef = ref<InstanceType<typeof Retrieval>>()

const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {

    isSafari.value = isSafariBrowser()

    isEdge.value = isEdgeBrowser().isEdge && isEdgeBrowser().isAndroid

    // 监听Safari浏览器滚动问题
    if (isSafari.value && scrollDiv.value) {
        // 确保滚动容器有正确的触摸事件处理
        scrollDiv.value.addEventListener('touchstart', () => { }, { passive: true })
    }
})

//搜索
const handKeyUp = () => {

    if (message.value === '\n') {
        errorToast('请输入搜索内容');
        return
    }

    nextTick(() => {
        viewRef.value?.searchView(
            message.value,
            true,
            scrollDiv.value
        )

        message.value = ''

        // 确保键盘被隐藏
        hideKeyboard()
    })
}

const search = (value: WorkOrderType[]) => {
    arrList.value = value
}

// 页面滚动时关闭键盘
const handleTouchMove = () => {
    hideKeyboard()
}
</script>

<style lang="scss" scoped>
.retrieval {
    width: 100%;
    height: calc(100vh - 175px);
    display: flex;

    .retrieval-content {
        flex: 1;
        text-align: center;
        margin-top: 150px;

        .retrieval-assistant {
            font-weight: 600;
            padding: 10px 0;
        }

        .retrieval-search {
            font-size: 14px;
        }
    }

    .retrieval-search-content {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        /* 添加惯性滚动，解决Safari滑动不流畅问题 */
        overscroll-behavior: contain;
        /* 防止滚动传播 */
    }
}

.retrieval-footer {
    width: 100%;
    position: fixed;

    :deep(.van-cell-group) {

        .van-cell {
            background: #eee;
            padding: 0;

            .van-cell__value {

                .van-field__body {
                    max-height: 200px;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    /* 添加惯性滚动 */
                    padding: 5px 5px 5px 0;
                    box-sizing: border-box;

                    .van-field__control {
                        padding: 10px 0 0 10px;
                    }
                }

                .van-field__word-limit {
                    padding-right: 10px;
                    margin: 0;
                }
            }
        }
    }
}
</style>

<style>
.retrieval-search-content em {
    color: #bf1920 !important;
    font-style: normal;
}
</style>